﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery手机端点击换一批标签代码</title>

<style type="text/css">
*{
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;

	box-sizing: border-box;
}
ul li{
	list-style: none;
}
a,a:active,a:hover {
	color: black;
	text-decoration: none;

}
.changeone{
	width: 100%;
	height: 140px;
	border-bottom:8px solid #eeeeee;
	font-size: 14px;
}

.changeone ul{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	height: 80px;
}

.changeone ul li{
	flex: 1;
	width: 25%;
	min-width: 25%;
	padding: 5px;
	text-align: center;
	margin-top: 10px;
}
.changeone ul li span{
	padding: 4px 5px;
	border:  1px solid #fe7702;
	border-radius: 6px;
}

.huan{
	text-align:center; 
	font-family:"微软雅黑";  
	color:gray;
	font-size: 16px;
	font-weight: bold;
}

.huanbox{
	margin-top: 10px;
	text-align: center;
}
</style>

</head>
<body>

<!-- 换一批 -->
<div class="changeone">
	<ul>
		<li><a href="#"><span>情侣旅行</span></a></li>
		<li><a href="#"><span>情侣旅行</span></a></li>
		<li><a href="#"><span>情侣旅行</span></a></li>
		<li><a href="#"><span>情侣旅行</span></a></li>
		<li><a href="#"><span>情侣旅行</span></a></li>
		<li><a href="#"><span>情侣旅行</span></a></li>
		<li><a href="#"><span>情侣旅行</span></a></li>
		<li><a href="#"><span>情侣旅行</span></a></li>

		<li><a href="#"><span>亲子旅行</span></a></li>
		<li><a href="#"><span>亲子旅行</span></a></li>
		<li><a href="#"><span>亲子旅行</span></a></li>
		<li><a href="#"><span>亲子旅行</span></a></li>
		<li><a href="#"><span>亲子旅行</span></a></li>
		<li><a href="#"><span>亲子旅行</span></a></li>
		<li><a href="#"><span>亲子旅行</span></a></li>
		<li><a href="#"><span>亲子旅行</span></a></li>

		<li><a href="#"><span>新婚旅行</span></a></li>
		<li><a href="#"><span>新婚旅行</span></a></li>
		<li><a href="#"><span>新婚旅行</span></a></li>
		<li><a href="#"><span>新婚旅行</span></a></li>
	</ul>


	<div class="huanbox"><a href="javascript:void(0)"><span class="huan">换一批</span></a>  </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>		

<script type="text/javascript">
	var changeindex=1;
	var clickindex=2;
	$(".changeone li").each(function(index,element){      
		if(index/8<changeindex){

			element.className="change"+changeindex;
		}else{
			changeindex++;
			element.className="change"+changeindex;
		}
	})
	$(".change1").siblings().css("display","none");
	$(".change1").show();
	$(".huan").click(function(){
		if(clickindex<=changeindex){
			$(".change"+clickindex).siblings().css("display","none");
			$(".change"+clickindex).show();
			clickindex++;
		}else{
			clickindex=1;
			$(".change"+clickindex).siblings().css("display","none");
			$(".change"+clickindex).show();
		}

	});
</script>
</body>
</html>